<style>
a.edit_budget{
	width:196px;
}
</style>

<script>
var view_model;

$(document).ready(function(){
	var query = window.location.href.split('?')[1];
	var id = query.split('=')[1];
	
	function Income(data){
		console.log('Adding income')
		console.log(data)
		this._id = ko.observable(data._id);
		this.name = ko.observable(data.name);
		this.amount = ko.observable(data.amount);
		this.frequency = ko.observable(data.frequency);
	}
	
	function EditIncomesViewModel() {
		// Set up the ViewModel
		var self = this;
		this.incomes = ko.observableArray([])
		this.total_frequency = ko.observable(7);

		this.total_income = ko.computed(function() {
		   var total = 0;
		   for (var i = 0; i < self.incomes().length; i++)
			   total += self.incomes()[i].amount()/self.incomes()[i].frequency()*self.total_frequency();
		   return total;
		});    
		
		self.AddNewIncome = function(){
			self.incomes.push(new Income({name: 'New Income', amount: '0', frequency: 14}));
		}
		self.RemoveIncome = function(income){
			self.incomes.remove(income);
		}
		this.SaveAndContinue = function(){
			$.post('/action/save_data', {budget_id: id, model_name: 'income', data: ko.toJSON(self.incomes)}, function(result){
			},'JSON');
		}
		
		// Load the income data from the server
		$.getJSON('/action/get_data', {model_name: 'income', budget: id}, function(docs) {
			if(docs.length===0){
				console.log('No incomes returned from server');
				self.AddNewIncome();
				return;
			}
			
			var mappedTasks = $.map(docs, function(item) { return new Income(item) });
			self.incomes(mappedTasks);
		}); 
	}
	view_model = new EditIncomesViewModel()
	ko.applyBindings(view_model);
	//$.post('/action/update_data', {budget_id: id, model_type: 'income', 
});
</script>

<h2> Edit Budget Incomes </h2>
<div style='width: 50%'>Here you can add and remove incomes from your budget. Incomes are any source of revenue you have available including a job, benifits or dividends.</div>
<h3>Incomes:</h3>
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Amount</th>
			<th>Frequency</th>
			<th id='dummy'></th>
		</tr>
	</thead>
	<tbody id='incomes' data-bind='foreach: incomes'>
		<tr data-bind="attr: {id: _id}">
			<td>
				<input id='name' data-bind='value: name' style='width:140px'/>
			</td>
			<td>
				<input id='amount' data-bind='value: amount' style='width:140px' />
			</td>
			<td>
				<select id='frequency' data-bind='value: frequency' style='width:140px'>
					<option value='365'>Anually</option>
					<option value='183'>Semi-Anually</option>
					<option value='91'>Quarterly</option>
					<option value='30'>Monthly</option>
					<option value='14'>Fortnightly</option>
					<option value='7'>Weekly</option>
					<option value='1'>Daily</option>
				</select>
			</td>
			<td>
				<a href='#'class='m-btn red-stripe edit_budget' data-bind='click: $parent.RemoveIncome'>Delete</a>
			</td>
		</tr>
	</tbody>
</table>
<a href='#' class='m-btn green-stripe edit_budget' data-bind='click: AddNewIncome'>Add New Income</a>
<br />
<h3>Summary</h3>
<table>
	<thead>
		<tr>
			<th>
				Total Income
			</th>
			<th>
				Frequency
			</th>
		</tr>
	<thead>
	<tbody>
		<tr>
			<td>
				$<span data-bind='text: total_income().toFixed(2)'></span>
			</td>
			<td>
				<select id='total_frequency' data-bind='value: total_frequency'>
					<option value='365'>Anually</option>
					<option value='183'>Semi-Anually</option>
					<option value='91'>Quarterly</option>
					<option value='30'>Monthly</option>
					<option value='14'>Fortnightly</option>
					<option value='7'>Weekly</option>
					<option value='1'>Daily</option>
				</select>
			</td>
		</tr>
	<tbody>
</table>
<br />
<a href='#' class='m-btn green-stripe' data-bind='click: SaveAndContinue'>Save and Continue</a>
<a href='#' class='m-btn purple-stripe' onclick='SaveAndReturn()'>Save and return to Home</a>
<a href='#' class='m-btn red-stripe' onclikc='Discard()'>Discard</a>